/*=========================================================================================
	File Name: drag-drop.js
	Description: drag & drop elements using dragula js
	--------------------------------------------------------------------------------------
	Item Name: Apex - Responsive Admin Theme
	Version: 1.0
	Author: GeeksLabs
	Author URL: http://www.themeforest.net/user/geekslabs
==========================================================================================*/


$(document).ready(function () {
  // Draggable Cards
  dragula([document.getElementById('card-drag-area')]);

  // Change Card color if moved
  dragula([document.getElementById('card-move')])
    .on('drag', function (el) {
      el.className = el.className.replace('card-moved', '');
    }).on('drop', function (el) {
      el.className += ' card-moved';
    }).on('over', function (el, container) {
      container.className += ' card-over';
    }).on('out', function (el, container) {
      container.className = container.className.replace('card-over', '');
    });

  // Copy Cards
  dragula([document.getElementById("copy-left"), document.getElementById("copy-right")], {
    copy: true
  });

  // Drag Handles
  dragula([document.getElementById("left-handles"), document.getElementById("right-handles")], {
    moves: function (el, container, handle) {
      return handle.classList.contains('handle');
    }
  });

  // Drag Title Handles
  dragula([document.getElementById("left-titleHandles"), document.getElementById("right-titleHandles")], {
    moves: function (el, container, handle) {
      return handle.classList.contains('titleArea');
    }
  });

});
